<!doctype html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <title>Bụi</title>                
        <link rel="stylesheet" href="css/base.css">
        <link rel="stylesheet" href="css/themes/type_04.css">
        <link rel="stylesheet" href="css/themes/color_13.css">        
    </head>
    <body>
        <div class="container">
            <div id="work">
                <div class="eight columns" id="col1">                    
                    <div class="project">
                        <div class="projectThumbnail">                        
                            <div class="projectThumbnailHover">
                                <h4>Project 01 Hover Title Goes Here</h4>
                                <h5>Optional Hover Subtitle</h5>
                            </div>

                            <img src="images/projects/project_01_desaturated.jpg" alt="Project 01" class="thumbnailImage" />
                        </div>

                        <div class="projectInfo">
                            <h4>Project 01 Title Goes Here</h4>
                            <div class="projectNavCounter"></div>
                            <div class="projectNav">
                                <div class="projectNavEnlarge"><button class="enlargeButton" onClick="window.location.href='projects/project_01/index.html'">View full-size</button></div>
                                <div class="projectNavClose"><button class="closeButton">Close</button></div>
                                <div class="projectNavButtons"><button class="prev"></button><button class="next"></button></div>
                            </div>
                            <p>
						This is a description of the project. This text is optional and the site layout works fine without it. The slider above (included in the Pro version only) is swipe-enabled with hardware accelerated transitions so it works super-smoothly on touch devices like the iPhone and iPad.
                            </p>
                            <ul>
                                <li><strong>Client:</strong> Wernham Hogg</li>
                                <li><strong>Role:</strong> Art Direction, Photography, Illustration</li>
                                <li><strong>Year:</strong> 2013</li>
                            </ul>
                        </div>
                    </div>
                    <!-- Project ends =================================================================== -->



                </div>
                <!-- Work page ends ========================================================================= -->

                <!-- About page begins ====================================================================== -->
                <div id="about">

                    <!-- Column 1 begins ==================================================================== -->
                    <div class="eight columns">

                        <h3>About page header</h3>
                        <p>
			Type &amp; Grids is a HTML5 template that focuses on typography and grids. It's responsive which means it looks great on all devices from desktops to laptops to tablets and mobile phones. It's super-customizable and comes with lots of nicely designed type and color themes. Download the <a href="http://www.typeandgrids.com/downloads/type_and_grids_free.zip">free zip file</a> to get started!
                        </p>

                        <h4>Subheader lorem ipsum</h4>
                        <p>
				10% of every sale is donated to the <strong><a href="http://www.audubon.org/" target="_blank">National Audubon Society</a></strong>. Audubon's mission: To conserve and restore natural ecosystems, focusing on birds, other wildlife, and their habitats for the benefit of humanity and the earth's biological diversity.
                        </p>

                        <h4>Subheader lorem ipsum</h4>
                        <p>
				Type &amp; Grids comes with 19 different type theme CSS files and 28 different color theme CSS files. You can easily mix and match the type and color themes to create a unique design for your site. No CSS knowledge is needed and all of the fonts shown in the <a href="http://demo.typeandgrids.com" target="_blank">demo</a> are included. 58 different background textures come with the download as well.
                        </p>

                        <ul class="disc">
                            <li>Simple to set up and update &ndash; all of the content is inside a single "index.html" page</li>
                            <li>Contains 19 type themes and 28 color themes which gives you over 500 unique design combinations &ndash; 58 background textures are included as well</li>
                            <li>Each type theme is meticulously handcrafted to ensure attention is paid to the small typographic details</li>
                            <li>Fully responsive design &ndash; looks great on all devices from desktops to laptops to tablets and mobile phones</li>
                            <li>Swipe-enabled with hardware accelerated transitions &ndash; works super-smoothly on touch devices like the iPhone and iPad</li>
                            <li>Coded using the latest HTML5/CSS3 standards and all code is <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fdemo.typeandgrids.com%2F" target="_blank">W3C valid</a> and cross-browser compatible</li>
                            <li>Video support &ndash; easily embed your videos from Vimeo or YouTube</li>
                            <li>Clean and semantic SEO-friendly code</li>
                            <li>Design featured on the <a href="http://www.thefwa.com/shortlist/jeremiah-shoaf" target="_blank">FWA Public Shortlist</a>, <a href="http://creattica.com/css/jeremiah-shoaf/90288" target="_blank">Creattica</a> and numerous other design sites</li>
                            <li><a href="http://www.typeandgrids.com/support/" target="_blank">Support and documentation</a> is available but everything is so simple to set up you probably won't need it</li>
                        </ul>

                        <h4>Subheader lorem ipsum</h4>
                        <p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac ante arcu, quis auctor sapien. Morbi magna leo, dapibus a pulvinar et, pharetra scelerisque felis. Mauris massa magna, gravida vitae convallis sagittis, sagittis ac ipsum. Integer arcu justo, vehicula vel accumsan ac, venenatis in massa. Curabitur in dui in urna interdum ullamcorper. Pellentesque ut imperdiet libero.
                        </p>

                        <blockquote>
                            &ldquo;Lorem ipsum dolor sit amet, <a href="http://www.google.com" target="_blank">consectetur adipiscing</a> elit. Donec ac ante arcu, quis auctor sapien. Morbi magna leo, dapibus a pulvinar et, pharetra scelerisque felis. Mauris massa magna, gravida vitae convallis sagittis, sagittis ac ipsum. Integer arcu justo, vehicula vel accumsan ac, venenatis in massa. Curabitur in dui in urna interdum ullamcorper. Pellentesque ut imperdiet libero.&rdquo;
                            <cite>John Doe, <a href="http://www.google.com" target="_blank">Google</a></cite>
                        </blockquote>

                        <h4>Subheader lorem ipsum</h4>
                        <p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac ante arcu, quis auctor sapien. Morbi magna leo, dapibus a pulvinar et, pharetra scelerisque felis. Mauris massa magna, gravida vitae convallis sagittis, sagittis ac ipsum. Integer arcu justo, vehicula vel accumsan ac, venenatis in massa. Curabitur in dui in urna interdum ullamcorper. Pellentesque ut imperdiet libero.
                        </p>

                        <h4>Subheader lorem ipsum</h4>
                        <p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac ante arcu, quis auctor sapien. Morbi magna leo, dapibus a pulvinar et, pharetra scelerisque felis. Mauris massa magna, gravida vitae convallis sagittis, sagittis ac ipsum. Integer arcu justo, vehicula vel accumsan ac, venenatis in massa. Curabitur in dui in urna interdum ullamcorper. Pellentesque ut imperdiet libero.
                        </p>

                    </div>
                    <!-- Column 1 ends ====================================================================== -->
                </div>
                <!-- About page ends ======================================================================== -->
            </div>
        </div><!-- container -->
    </body>
</html>